<template>
  <el-dialog :title="title" :visible.sync="dialogVisible">
    <div v-html="markdown" class="markdown-body"></div>
  </el-dialog>
</template>

<script>
import marked from 'marked'

export default {
  name: 'MarkDownDialog',
  props: ['visible', 'title', 'mdContent'],
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    markdown: function () {
      if (this.mdContent) {
        return marked(this.mdContent)
      } else {
        return ''
      }
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 10px;
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
</style>
